<template>
  <view :style="[style]" class="glo-reminder">
    <sc-image height="41" src="/static/imgs/ic_tixing.png" width="42"></sc-image>
    <view class="reminder-content">
      <swiper class="scroll-view" :circular="true" :autoplay="true" :interval="props.interval" :duration="500" vertical>
        <swiper-item v-for="(item, index) in props.messages" :key="index">
          <view class="message-item">{{ item }}</view>
        </swiper-item>
      </swiper>
    </view>
  </view>
</template>
<script setup>
const props = defineProps({
  bgColor: {
    type: String,
    default: 'rgba(255,255,255,0.2)',
    required: true
  },
  messages: {
    type: Array,
    default: () => [
      '欢迎来到顾客系统！',
      '请关注最新优惠活动',
      '感谢您的使用'
    ]
  },
  interval: {
    type: Number,
    default: 3000 // 每3秒切换一次
  }
})

const style = computed(() => ({
  backgroundColor: props.bgColor
}))

</script>

<style lang="scss" scoped>
.glo-reminder {
  display: grid;
  grid-template-columns: 43rpx 1fr;
  grid-gap: 10rpx;
  align-items: center;
  padding: 0 15rpx;
  height: 64rpx;
  border-radius: 100px;
  overflow: hidden;
}

.reminder-content {
  flex: 1;
  height: 44rpx;
  overflow: hidden;
}

.scroll-view {
  width: 100%;
  height: 44rpx;
}

.message-item {
  height: 44rpx;
  line-height: 44rpx;
  font-size: 24rpx;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>
